// Customize existing form controls
//
// Overrides Bootstrap defaults.

// Custom select menu
//
// Add the class to the `<select>`.

.custom-select {
  display: inline-block;
  padding: @padding-base-vertical (@padding-base-horizontal * 3) @padding-base-vertical @padding-base-horizontal;
  font-size: @font-size-base;
  line-height: @line-height-base;
  color: @custom-select-color; // @input-color
  vertical-align: middle;
  background: url() no-repeat right @padding-base-horizontal center;
  background-color: @custom-select-bg; // @input-bg
  background-clip: padding-box;
  background-size: 8px 10px;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: @input-border-radius;
  -webkit-appearance: none;
  appearance: none;

  // Unfuck IE9 custom selects which otherwise display our custom arrows along
  // the default buttony-arrow doodad.
  background-image: none \9;
  padding-right: ~"@{padding-base-horizontal} \9";

  // Customize the `:focus` state to imitate native WebKit styles.
  .form-control-focus();

  // Disabled state

  &:disabled {
    background-color: @custom-select-disabled-bg;
    cursor: not-allowed;
  }
}

.custom-select-sm {
  padding-top: 3px;
  padding-bottom: 3px;
}


//
// Custom checkboxes and radios
//

.custom-control {
  > label {
    padding-left: 25px;
    font-weight: normal;
  }

  &.radio-inline,
  &.checkbox-inline {
    padding-left: 25px;

    > label {
      padding-left: 0;
    }
  }
}

.custom-control input {
  position: absolute;
  opacity: 0;
  z-index: -1; /* Put the input behind the label so it doesn't overlay text */
}

.custom-control-indicator {
  position: absolute;
  top: 1px;
  left: 0;
  display: block;
  width:  18px;
  height: 18px;
  text-align: center;
  background-color: @custom-control-indicator-bg;
  background-clip: padding-box;
  background-size: 75% 75%;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid @custom-control-indicator-border;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
  user-select: none;
}


/* Hover state */
/* Uncomment if you need it, but be aware of the sticky iOS states.
.control:hover .control-indicator {
  background-color: #ccc;
}
*/

/* Focus */
.custom-control input:focus ~ .custom-control-indicator {
  box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
}

/* Checked state */
.custom-control input:checked ~ .custom-control-indicator {
  background-color: @custom-control-indicator-checked-bg;
  border-color: @custom-control-indicator-checked-border;
  box-shadow: none;
}

/* Active */
.custom-control input:active ~ .custom-control-indicator {
  background-color: @custom-control-indicator-active-bg;
  border-color: @custom-control-indicator-active-border;
  box-shadow: none;
}

// Disabled
.custom-control input:disabled ~ .custom-control-indicator {
  background-color: @custom-control-indicator-disabled-bg;
  border-color: @custom-control-indicator-disabled-border;
  box-shadow: none;
  cursor: not-allowed;
}

/* Checkbox modifiers */
.form-horizontal .custom-control-indicator {
  margin-top: @padding-base-vertical;
}
.custom-checkbox .custom-control-indicator {
  border-radius: .33rem;
}
.custom-checkbox input:checked ~ .custom-control-indicator {
  background-image: url();
}

/* Radio modifiers */
.custom-radio .custom-control-indicator {
  border-radius: 50%;
}
.custom-radio input:checked ~ .custom-control-indicator {
  background-image: url();
}

/* Alternately, use another character */
.custom-control-x input:checked ~ .custom-control-indicator {
  background-image: url();
}
.custom-control-dash input:checked ~ .custom-control-indicator {
  background-image: url()
}

// Custom control layout

.custom-controls-inline {
  .custom-control + .custom-control {
    margin-left: 20px;
  }
}

.custom-control-stacked {
  .custom-control:after {
    display: block;
    content: "";
  }
}

// highlevel form overrides
// originally intorduced by dashboard toolkit
.radio-inline,
.checkbox-inline {
  position: relative;

  label {
    margin-bottom: 0;
    cursor: pointer;
  }
}

.form-control {
  transition: none;

  &:focus {
    color: @gray-base;
    background-color: #fff;
    box-shadow: none;
  }
}
